<template>
  <div :style="{ width: '100%', height: '100%', position: 'relative' }">
    <div @click="goBackClick"
      :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', top: (28 / 96) + 'rem', left: (33 / 96) + 'rem', cursor: 'pointer' }">
      <div
        :style="{ width: (37 / 96) + 'rem', height: (49 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginRight: (4 / 96) + 'rem' }">
        <img style="width: 100%; height: 100%;" src="../../../static/back.png" />
      </div>
      <span
        :style="{ fontSize: (30 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#999999', lineHeight: (24 / 96) + 'rem' }">返回</span>
    </div>
    <!-- <Search @toSearchClick="toSearchClick" placeholderText="搜索比赛"></Search> -->
    <Search placeholderText="搜索比赛"></Search>
    <div style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
      <div
        :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center',  marginLeft: '4.25%', marginBottom: (31 / 96) + 'rem' }">
        <div
          :style="{ width: (17 / 96) + 'rem', height: (17 / 96) + 'rem', background: '#4f9770', marginRight: (8 / 96) + 'rem' }">
        </div>
        <span
          :style="{ fontSize: (32 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#000000', lineHeight: (24 / 96) + 'rem' }">{{
          title }}</span>
      </div>
      <div :style="{ marginRight: '3.22%' }">
        <tab :tabId="tabId" :tabList="tabList" @tabClick="tabClick"></tab>
      </div>
    </div>
    <div v-if="matchList.length != 0">
      <match-list :matchId="matchId" :matchList="matchList" @matchListClick="matchListClick"></match-list>
      <div
        :style="{ width: '100%', marginTop: (10 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', position: 'absolute', bottom: (20 / 96) + 'rem' }">
        <pagination :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
          :page-size="pageSize" layout="total, prev, pager, next" :total="total">
        </pagination>
        <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
          <span
            :style="{ fontSize: (16 / 96) + 'rem', fontFamily: 'YouYuan', fontWeight: '400', color: '#999999', lineHeight: (24 / 96) + 'rem' }">共{{
            Math.ceil(total / pageSize) }}页</span>
        </div>
      </div>
    </div>
    <div v-if="matchList.length == 0"
      style="width: 100%; height: 81%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
      <img :style="{ width: (396 / 96) + 'rem', height: (300 / 96) + 'rem', marginBottom: (30 / 96) + 'rem' }"
        src="../../../static/nodata.png" />
      <span
        :style="{ fontSize: (30 / 96) + 'rem', fontFamily: 'YouYuan', fontWeight: '400', color: '#999999', lineHeight: (24 / 96) + 'rem' }">暂无数据</span>
    </div>
  </div>
</template>

<script>
  import { Pagination } from 'element-ui';
  import { pageResize } from '../../utils/resetScreenSize.js'
  import MatchList from '../../components/MatchList'
  import Search from '../../components/Search'
  import Tab from '../../components/Tab'
  import utils from '../../utils/common'
  export default {
    name: 'MatchPage',
    components: {
      MatchList: MatchList,
      Search: Search,
      Tab: Tab,
      Pagination: Pagination
    },
    data () {
      return {
        currentPage: 1,
        pageSize: 100,
        total: 0,
        leagueId: 0,
        matchId: 0,
        tabId: 0,
        title: "",
        matchName: "",
        isSearchType: false,
        matchList: [],
        tabList: [
          {
            id: 1,
            title: "未结束"
          },
          {
            id: 2,
            title: "已结束"
          }
        ],
        tabStatus: 0 // "on"
        // tabList: [
        //   {
        //     id: 1,
        //     title: "进行中"
        //   },
        //   {
        //     id: 2,
        //     title: "未开始"
        //   },
        //   {
        //     id: 3,
        //     title: "已结束"
        //   }
        // ]
      }
    },
    mounted () {
      pageResize();
      let path = this.$route.path.replace(new RegExp("/", "gm"), "")
      this.sidebarIndex = path;
    },
    beforeDestroy () {
      window.document.title = '大屏助手';
    },
    methods: {
      toSearchClick (matchName) {
        if (this.matchName != utils.trim(matchName)) {
          this.matchName = utils.trim(matchName);
          this.currentPage = 1;
        }
        this.isSearchType = true;
        // 接口调用
        let jsons = {
          page: this.currentPage - 1,
          size: this.pageSize,
          leagueId: this.leagueId,
          keyword: this.matchName
        };
        this.$http.post('/competition/searchVo', jsons).then((res) => {
          if (res.code == 0) {
            // console.log("res: ", res);
            let matchList = [];
            for (let i = 0; i < res.data.content.length; i++) {
              let datetimes = new Date(Date.parse(res.data.content[i].datetime.replace('.0', '').replace(/-/g, '/')));
              let datetime = utils.dateFormat(datetimes, "yyyy-MM-dd hh:mm");
              matchList.push({
                id: res.data.content[i].id,
                matchTime: datetime,
                matchTypes: res.data.content[i].status,
                awayTeamId: res.data.content[i].awayTeamId,
                awayTeamImage: res.data.content[i].awayTeamLogo ? res.data.content[i].awayTeamLogo : "../../static/league_match_logo.png",
                awayTeamName: res.data.content[i].awayTeamName,
                awayTeamScore: res.data.content[i].awayTeamScore,
                createDtm: res.data.content[i].createDtm,
                datetime: res.data.content[i].datetime,
                del: res.data.content[i].del,
                formatSection: res.data.content[i].formatSection,
                formatSectionId: res.data.content[i].formatSectionId,
                homeTeamId: res.data.content[i].homeTeamId,
                homeTeamImage: res.data.content[i].homeTeamLogo ? res.data.content[i].homeTeamLogo : "../../static/league_match_logo.png",
                homeTeamName: res.data.content[i].homeTeamName,
                homeTeamScore: res.data.content[i].homeTeamScore,
                league: res.data.content[i].league,
                leagueId: res.data.content[i].leagueId,
                leagueLogo: res.data.content[i].leagueLogo ? res.data.content[i].leagueLogo : "../../static/league_match_logo.png",
                operatorList: res.data.content[i].operatorList,
                place: res.data.content[i].place,
                placeId: res.data.content[i].placeId,
                season: res.data.content[i].season,
                seasonId: res.data.content[i].seasonId,
                statisticalModel: res.data.content[i].statisticalModel,
                status: res.data.content[i].status,
                updateDtm: res.data.content[i].updateDtm,
                videoLiveStatus: res.data.content[i].videoLiveStatus
              });
            }
            this.matchList = matchList;
            this.total = res.data.totalElements;
          } else {
            this.$toast(res.msg);
          }
        }).catch(e => {
          // console.log("e: ", e);
        });
      },
      matchListClick (item) {
        this.matchId = item.id;
        this.$router.push({ name: 'MatchSchedule5V5', query: { matchId: this.matchId, contestId: this.leagueId } })
      },
      tabClick (id) {
        // console.log("tabId: ", id);
        if (id == this.tabId) {
          return;
        }
        this.tabId = id;
        // 接口调用
        if (id == 1) {
          this.currentPage = 1;
          this.tabStatus = 0 // "on";
          if (this.isSearchType) {
            this.toSearchClick(this.matchName);
          }
          if (!this.isSearchType) {
            this.getMatchLists(this.leagueId, this.currentPage);
          }
        }
        if (id == 2) {
          this.currentPage = 1;
          this.tabStatus = 1 // "after";
          if (this.isSearchType) {
            this.toSearchClick(this.matchName);
          }
          if (!this.isSearchType) {
            this.getMatchLists(this.leagueId, this.currentPage);
          }
        }
        // if(id == 3) {
        //   this.currentPage = 1;
        //   if(this.isSearchType) {
        //     this.toSearchClick(this.matchName);
        //   }
        //   if(!this.isSearchType) {
        //     this.getMatchLists(this.leagueId, this.currentPage);
        //   }
        // }
      },
      goBackClick () {
        this.$router.back();
      },
      handleSizeChange (val) {
        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange (val) {
        this.currentPage = val;
        // console.log(`当前页: ${val}`);
        // 接口调用
        if (this.isSearchType) {
          this.toSearchClick(this.matchName);
        }
        if (!this.isSearchType) {
          this.getMatchLists(this.leagueId, this.currentPage);
        }
      },
      getMatchLists (leagueId, currentPage) {
        let jsons = {};
        if (this.tabStatus != "") {
          jsons = {
            offset: currentPage - 1,
            length: this.pageSize,
            leagueId: leagueId,
            status: this.tabStatus
          };
        }
        if (this.tabStatus == "") {
          jsons = {
            offset: currentPage - 1,
            length: this.pageSize,
            leagueId: leagueId
          };
        }
        fetch(`http://scorebar.yundongshugenmatch.cn/api/system/league/h5/tournamentList?contestId=${leagueId}&state=${this.tabStatus}`,
          {
            method: 'GET',
            // headers: {
            //   'Content-Type': 'application/json;charset=utf-8'
            // }
          }
        )
          .then((response) => response.json())
          .then((res) => {
            if (res.code == 0) {
              let matchList = [];
              for (let i = 0; i < res.rows.length; i++) {
                // let datetimes = new Date(Date.parse(res.rows[i].createTime.replace('.0', '').replace(/-/g, '/')));
                // let datetime = utils.dateFormat(datetimes, "yyyy-MM-dd hh:mm");
                matchList.push({
                  id: res.rows[i].id,
                  // matchTime: datetime + " " + res.rows[i].stageName || '',
                  matchTime: res.rows[i].tournamentBeginTime,
                  // matchTypes: res.object[i].status,
                  // awayTeamId: res.object[i].awayTeamId,
                  awayTeamImage: "../../static/league_match_logo.png",
                  awayTeamName: res.rows[i].twoTeam.teamName,
                  // awayTeamScore: res.object[i].awayTeamScore,
                  // createDtm: res.object[i].createDtm,
                  // datetime: res.object[i].datetime,
                  // del: res.object[i].del,
                  // formatSection: res.object[i].formatSection,
                  // formatSectionId: res.object[i].formatSectionId,
                  // homeTeamId: res.object[i].homeTeamId,
                  homeTeamImage: "../../static/league_match_logo.png",
                  homeTeamName: res.rows[i].oneTeam.teamName,
                  // homeTeamScore: res.object[i].homeTeamScore,
                  // league: res.object[i].leagueName,
                  // leagueId: res.object[i].leagueId,
                  leagueLogo: "../../static/league_match_logo.png",
                  // operatorList: res.object[i].operatorList,
                  // place: res.object[i].place,
                  // placeId: res.object[i].placeId,
                  // season: res.object[i].season,
                  // seasonId: res.object[i].seasonId,
                  // statisticalModel: res.object[i].statisticalModel,
                  // status: res.object[i].status,
                  // updateDtm: res.object[i].updateDtm,
                  // videoLiveStatus: res.object[i].videoLiveStatus,
                  // matchFormat: res.object[i].matchFormat
                  // awayTeamSupportCount: 21
                  // forfeit: "NORMAL"
                  // homeTeamColor: "red"
                  // homeTeamId: 455275
                  // homeTeamLogoUrl: "upload/__qiniu_transfer__/55ff3c65fb7a92617148f461c1072c0d"
                  // homeTeamName: "上沙"
                  // homeTeamScore: 89
                  // homeTeamSupportCount: 20
                  // latitude: null
                  // leagueId: 50219
                  // leagueLogoUrl: "upload/__qiniu_transfer__/55ff3c65fb7a92617148f461c1072c0d"
                  // leagueName: "龙光集团2021长安镇第六届长青杯篮球赛"
                  // livePrice: 0
                  // longitude: null
                  // matchFormat: "5VS5"
                  // matchStatus: "after"
                  // matchTime: "2021-10-09 19:30:00.0"
                  // onlineHotCount: ""
                  // part: null
                  // personalUrl: "ynvchfixzz"
                  // scheduleId: 815668
                  // seasonId: 51221
                  // seasonName: "2021"
                  // seasonStatus: 2
                  // sportsCenterId: null
                  // sportsCenterName: null
                  // stageId: 147266
                  // stageName: "决赛"
                  // statisticsType: "detail"
                  // videoLiveStatus: 0
                });
              }
              this.matchList = matchList;
              console.log('this.matchList', this.matchList)
              // this.total = res.data.totalElements;
            } else {
              this.$toast(res.msg);
            }
          })
        // this.$http.post('http://api.app.woaoo.net/schedule/get/list.json', jsons).then((res) => {
        //   console.log("res: ", res);
        //   if(res.code == 0) {
        //     // console.log("res: ", res);
        //     let matchList = [];
        //     for(let i=0;i<res.data.content.length;i++) {
        //       let datetimes = new Date(Date.parse(res.data.content[i].datetime.replace('.0', '').replace(/-/g, '/')));
        //       let datetime = utils.dateFormat(datetimes, "yyyy-MM-dd hh:mm");
        //       matchList.push({
        //         id: res.data.content[i].id,
        //         matchTime: datetime,
        //         matchTypes: res.data.content[i].status,
        //         awayTeamId: res.data.content[i].awayTeamId,
        //         awayTeamImage: res.data.content[i].awayTeamLogo ? res.data.content[i].awayTeamLogo : "../../static/league_match_logo.png",
        //         awayTeamName: res.data.content[i].awayTeamName,
        //         awayTeamScore: res.data.content[i].awayTeamScore,
        //         createDtm: res.data.content[i].createDtm,
        //         datetime: res.data.content[i].datetime,
        //         del: res.data.content[i].del,
        //         formatSection: res.data.content[i].formatSection,
        //         formatSectionId: res.data.content[i].formatSectionId,
        //         homeTeamId: res.data.content[i].homeTeamId,
        //         homeTeamImage: res.data.content[i].homeTeamLogo ? res.data.content[i].homeTeamLogo : "../../static/league_match_logo.png",
        //         homeTeamName: res.data.content[i].homeTeamName,
        //         homeTeamScore: res.data.content[i].homeTeamScore,
        //         league: res.data.content[i].league,
        //         leagueId: res.data.content[i].leagueId,
        //         leagueLogo: res.data.content[i].leagueLogo ? res.data.content[i].leagueLogo : "../../static/league_match_logo.png",
        //         operatorList: res.data.content[i].operatorList,
        //         place: res.data.content[i].place,
        //         placeId: res.data.content[i].placeId,
        //         season: res.data.content[i].season,
        //         seasonId: res.data.content[i].seasonId,
        //         statisticalModel: res.data.content[i].statisticalModel,
        //         status: res.data.content[i].status,
        //         updateDtm: res.data.content[i].updateDtm,
        //         videoLiveStatus: res.data.content[i].videoLiveStatus
        //       });
        //     }
        //     this.matchList = matchList;
        //     this.total = res.data.totalElements;
        //   } else {
        //     this.$toast(res.msg);
        //   }
        // }).catch(e => {
        //   // console.log("e: ", e);
        // });
        // this.$http.post('/competition/pageVo', jsons).then((res) => {
        //   if(res.code == 0) {
        //     // console.log("res: ", res);
        //     let matchList = [];
        //     for(let i=0;i<res.data.content.length;i++) {
        //       let datetimes = new Date(Date.parse(res.data.content[i].datetime.replace('.0', '').replace(/-/g, '/')));
        //       let datetime = utils.dateFormat(datetimes, "yyyy-MM-dd hh:mm");
        //       matchList.push({
        //         id: res.data.content[i].id,
        //         matchTime: datetime,
        //         matchTypes: res.data.content[i].status,
        //         awayTeamId: res.data.content[i].awayTeamId,
        //         awayTeamImage: res.data.content[i].awayTeamLogo ? res.data.content[i].awayTeamLogo : "../../static/league_match_logo.png",
        //         awayTeamName: res.data.content[i].awayTeamName,
        //         awayTeamScore: res.data.content[i].awayTeamScore,
        //         createDtm: res.data.content[i].createDtm,
        //         datetime: res.data.content[i].datetime,
        //         del: res.data.content[i].del,
        //         formatSection: res.data.content[i].formatSection,
        //         formatSectionId: res.data.content[i].formatSectionId,
        //         homeTeamId: res.data.content[i].homeTeamId,
        //         homeTeamImage: res.data.content[i].homeTeamLogo ? res.data.content[i].homeTeamLogo : "../../static/league_match_logo.png",
        //         homeTeamName: res.data.content[i].homeTeamName,
        //         homeTeamScore: res.data.content[i].homeTeamScore,
        //         league: res.data.content[i].league,
        //         leagueId: res.data.content[i].leagueId,
        //         leagueLogo: res.data.content[i].leagueLogo ? res.data.content[i].leagueLogo : "../../static/league_match_logo.png",
        //         operatorList: res.data.content[i].operatorList,
        //         place: res.data.content[i].place,
        //         placeId: res.data.content[i].placeId,
        //         season: res.data.content[i].season,
        //         seasonId: res.data.content[i].seasonId,
        //         statisticalModel: res.data.content[i].statisticalModel,
        //         status: res.data.content[i].status,
        //         updateDtm: res.data.content[i].updateDtm,
        //         videoLiveStatus: res.data.content[i].videoLiveStatus
        //       });
        //     }
        //     this.matchList = matchList;
        //     this.total = res.data.totalElements;
        //   } else {
        //     this.$toast(res.msg);
        //   }
        // }).catch(e => {
        //   // console.log("e: ", e);
        // });
      }
    },
    activated () {
      window.document.title = "联赛主页";
      this.tabId = 0;
      this.currentPage = 1;
      this.title = this.$route.query.title
      this.leagueId = this.$route.query.leagueId
      this.getMatchLists(this.leagueId, this.currentPage);
    },
    deactivated () {
      this.isSearchType = false;
    }
  }
</script>

<style scoped>
  .father .child {
    display: none;
  }

  .father:hover .child {
    display: block;
  }

  .home-index {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .match-title-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .match-title {
    font-family: SimHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
  }
</style>
